<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        body {
            background: #F2F2F2;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor" style="display: none">
    <div class="page-main" :style="{height:(height)+'px'}">
        <el-row style="height: 100%;">
            <el-col :span="4" style="border: 1px solid #1ab394; ">
                <div style="background: linear-gradient(45deg, #0081ff, #1cbbb4);padding: 15px 10px;color: #ffffff;">
                    用户列表
                </div>
                <el-input
                        placeholder="输入关键字进行筛选"
                        v-model="filterText" style="border-radius: 0px">
                </el-input>
                <el-tree
                        :data="devTree"
                        node-key="Id"
                        @node-click="proNode"
                        default-expand-all
                        :filter-node-method="filterNode"
                        ref="tree"
                        :props="defaultProps" style="overflow-y: scroll;height: calc(100% - 70px);margin-top: 15px ;">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
                <i :class="data.icon"></i>{{data.Text}}
            </span>
        </span>
                </el-tree>
            </el-col>

            <el-col :span="20">
                <div class="main-head">
                    <el-form label-width="80px" :model="userForm" ref="userForm">
                        <el-form-item label="用户名"
                                      prop="userName"
                                      :rules="[
                                     {required:true,message:'请输入用户名,内容不能为空!',trigger:'blur'}
                            ]">
                            <el-input v-model="userForm.userName" style="width: 15%;" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="姓名"
                                      prop="nickName"
                                      :rules="[
                                     {required:true,message:'请输入姓名,内容不能为空!',trigger:'blur'}
                            ]">
                            <el-input v-model="userForm.nickName" style="width: 15%;"></el-input>
                        </el-form-item>
                        <!--<el-form-item label="所属公司" prop="Company"-->
                        <!--:rules="[-->
                        <!--{required:true,message:'请选择公司,内容不能为空!',trigger:'blur'}-->
                        <!--]">-->
                        <!--<el-select v-model="userForm.Company" filterable placeholder="请选择公司" style="width: 15%;">-->
                        <!--<el-option-->
                        <!--v-for="item in companyList"-->
                        <!--:key="item.companyCode"-->
                        <!--:label="item.companyName"-->
                        <!--:value="item.companyCode">-->
                        <!--</el-option>-->
                        <!--</el-select>-->
                        <!--</el-form-item>-->

                        <el-form-item label="所属上级" prop="parentId"
                                      :rules="[
                                     {required:true,message:'请选择父节点,内容不能为空!',trigger:'blur'}
                            ]">
                            <el-select v-model="userForm.parentId" filterable placeholder="请选择父节点" style="width: 15%;">
                                <el-option
                                        v-for="item in child"
                                        :key="item.Id"
                                        :label="item.Text"
                                        :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!--<el-form-item label="角色">-->
                        <!--<el-select v-model="userForm.roleId" filterable placeholder="请选择角色" style="width: 15%;">-->
                        <!--<el-option-->
                        <!--v-for="item in roleData"-->
                        <!--:key="item.Id"-->
                        <!--:label="item.roleName"-->
                        <!--:value="item.Id">-->
                        <!--</el-option>-->
                        <!--</el-select>-->
                        <!--</el-form-item>-->
                        <el-form-item label="部门">
                            <el-select v-model="userForm.departmentId" filterable placeholder="请选择部门"
                                       style="width: 15%;">
                                <el-option
                                        v-for="item in DepartmentData"
                                        :key="item.DepartmentID"
                                        :label="item.DepartmentName"
                                        :value="item.DepartmentID">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="职位等级">
                            <el-select v-model="userForm.titleGrade" filterable placeholder="请选择职位等级"
                                       style="width: 15%;">
                                <el-option
                                        v-for="item in titleGradeData"
                                        :key="item.Id"
                                        :label="item.GradeName"
                                        :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="工种">
                            <el-select v-model="userForm.workType" filterable placeholder="请选择工种"
                                       style="width: 15%;">
                                <el-option
                                        v-for="item in NewItems"
                                        :key="item.Id"
                                        :label="item.workName"
                                        :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="联系电话">
                            <el-input type="tel" v-model="userForm.Telephone" style="width: 15%;"></el-input>
                        </el-form-item>
                        <template v-if="show">
                            <el-row>
                                <el-button type="primary" @click="saveBtn()">保存</el-button>
                                <el-button @click="delBtn(userForm.Id)" :disabled="!editMod">删除</el-button>
                                <el-button @click="addChild()">新增子用户
                                </el-button>
                            </el-row>
                        </template>
                        </el-form-item>
                    </el-form>
                    <el-dialog
                            title="增加用户"
                            :visible.sync="addFormVisible"
                            width="45%"
                    >
                        <el-card>
                            <el-form label-width="80px" :model="childForm" ref="childForm">
                                <el-form-item label="用户名"
                                              prop="userName"
                                              :rules="[
                                     {required:true,message:'请输入用户名,内容不能为空!',trigger:'blur'}
                            ]">
                                    <el-input v-model="childForm.userName" style="width: 40%;"></el-input>
                                </el-form-item>


                                <el-form-item label="密码"
                                              prop="Password"
                                              :rules="[
                                     {required:true,message:'请输入密码,内容不能为空!',trigger:'blur'}
                            ]">
                                    <el-input type="password" v-model="childForm.Password"
                                              style="width: 40%;"></el-input>
                                </el-form-item>


                                <el-form-item label="确认密码"
                                              prop="checkPass"
                                              :rules="[
                                     {required:true,message:'请输入密码,内容不能为空!',trigger:'blur'}
                            ]">
                                    <el-input v-model="childForm.checkPass" type="password"
                                              style="width: 40%;"></el-input>
                                </el-form-item>

                                <el-form-item label="姓名"
                                              prop="nickName"
                                              :rules="[
                                     {required:true,message:'请输入姓名,内容不能为空!',trigger:'blur'}
                            ]">
                                    <el-input v-model="childForm.nickName" style="width: 40%;"></el-input>
                                </el-form-item>


                                <!--                                <el-form-item label="所属公司">-->
                                <!--                                    <el-select v-model="childForm.Company" filterable placeholder="请选择公司"-->
                                <!--                                               style="width: 40%;">-->
                                <!--                                        <el-option-->
                                <!--                                                v-for="item in companyList"-->
                                <!--                                                :key="item.companyCode"-->
                                <!--                                                :label="item.companyName"-->
                                <!--                                                :value="item.companyCode">-->
                                <!--                                        </el-option>-->
                                <!--                                    </el-select>-->
                                <!--                                </el-form-item>-->
                                <!--<el-form-item label="角色">-->
                                <!--<el-select v-model="childForm.roleId" filterable placeholder="请选择角色"-->
                                <!--style="width: 40%;">-->
                                <!--<el-option-->
                                <!--v-for="item in roleData"-->
                                <!--:key="item.Id"-->
                                <!--:label="item.roleName"-->
                                <!--:value="item.Id">-->
                                <!--</el-option>-->
                                <!--</el-select>-->
                                <!--</el-form-item>-->
                                <el-form-item label="部门">
                                    <el-select v-model="childForm.DepartmentID" filterable placeholder="请选择部门"
                                               style="width: 40%;">
                                        <el-option
                                                v-for="item in DepartmentData"
                                                :key="item.DepartmentID"
                                                :label="item.DepartmentName"
                                                :value="item.DepartmentID">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="职位等级">
                                    <el-select v-model="childForm.titleGrade" filterable placeholder="请选择职位等级"
                                               style="width: 40%;">
                                        <el-option
                                                v-for="item in titleGradeData"
                                                :key="item.Id"
                                                :label="item.GradeName"
                                                :value="item.Id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="工种">
                                    <el-select v-model="childForm.workType" filterable placeholder="请选择工种"
                                               style="width: 40%;">
                                        <el-option
                                                v-for="item in NewItems"
                                                :key="item.Id"
                                                :label="item.workName"
                                                :value="item.Id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="联系电话">
                                    <el-input type="tel" v-model="childForm.Telephone" style="width: 40%;"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-card>
                        <br/>

                        <span slot="footer" class="dialog-footer">
                    <el-button style="text-align: center" @click="cancleChild()">取消</el-button>
                    <el-button type="primary" @click="submitChild()"
                               style="text-align: center">确定</el-button>
            </span>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>
    </div>


</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>


<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            show: true,
            userForm: {},
            childForm: {},
            addFormVisible: false,
            editMod: false,
            currentId: '',
            expandId: '',
            selectUid: '',
            number: 0,
            roleData: [],
            companyList: [],
            child: [],
            WorkData: [],
            DepartmentData: [],
            titleGradeData: [{GradeName: '公司级', Id: 0}, {GradeName: '分管领导级', Id: 1}, {
                GradeName: '部门级',
                Id: 2
            }, {GradeName: '车间级', Id: 3}, {GradeName: '班组', Id: 4}, {GradeName: '岗位级', Id: 5}],
            defaultProps: {
                label: 'Text',
                id: 'Id',
            },
            devTree: '',   //树形数据

            height: 500,
            filterText: '',
            workTypeText: '',
            flag: false,
        },
        methods: {
            filterNode(value, data) {
                if (!value) return true;
                return data.Text.indexOf(value) !== -1;
            },
            proNode: function (data) {
                this.currentId = data.Id.split("_")[1];
                if (data.Id.split("_")[0] == 'U') {
                    this.editMod = true;
                    if (this.currentId == SiteConfig.account.id) {
                        this.editMod = false;
                    }
                    this.getUserDetail({Id: data.Id.split("_")[1]});
                    this.selectUid = data.Id.split("_")[1];
                    HttpUtil.get('User/Parent', {Id: data.Id.split("_")[1]}).success((res) => {
                        for (var ind in res.data) {
                            res.data[ind].Id += '';
                        }
                        this.child = res.data;
                    })
                } else {
                    this.editMod = false;
                    this.userForm = {};
                }
            },
            //递归成树形数据
            parseTree(data, pid) {
                const result = []
                let temp = []
                for (let i = 0; i < data.length; i++) {
                    if (data[i].ParentId === pid) {
                        const obj = data[i]
                        if (parseInt(obj.Type - 110) == 2) {
                            obj.icon = 'el-icon-s-home';

                        } else if (parseInt(obj.Type - 110) == 3) {
                            obj.icon = 'el-icon-s-custom'
                        } else {
                            obj.icon = 'el-icon-menu'
                        }
                        temp = this.parseTree(data, data[i].Id)
                        if (temp.length > 0) {
                            obj.children = temp
                        }
                        result.push(obj)
                    }
                }
                return result
            },
            delBtn(id) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    if (SiteConfig.account.id == id) {
                        this.$message({
                            type: 'error',
                            message: '无法删除总账户'
                        });
                        return;
                    }
                    HttpUtil.getV2('User/Delete', {Id: id}).success((res) => {
                        if (res.state == 0) {
                            HttpUtil.get('Project/deleteUser', {
                                projectId: SiteConfig.account.projectId,
                                userId: id
                            }).success((r) => {
                                if (r.state == 0) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功'
                                    });
                                    this.getUserList();
                                }
                            })
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.errMsg
                            })
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            saveBtn() {
                if (!this.currentId) {
                    this.$message({
                        type: 'error',
                        message: '请选择左侧树节点'
                    })
                    return;
                }
                this.$refs.userForm.validate((valid) => {
                    if (valid) {
                        if (!(/^1[3456789]\d{9}$/.test(this.userForm.Telephone))) {
                            this.$message({
                                type: 'error',
                                message: '手机号码有误，请重填'
                            })
                            return;
                        }

                        HttpUtil.get('User/Update', this.userForm).success((res) => {
                            this.$message({
                                type: 'success',
                                message: '修改成功'
                            });
                            this.getUserList();
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '输入内容不能为空',
                        })
                    }
                });
            },
            addChild() {
                if (!this.currentId) {
                    this.$message({
                        type: 'error',
                        message: '请选择左侧树节点'
                    })
                    return;
                }
                this.childForm.parentId = this.currentId;
                this.addFormVisible = true;
            },
            checkPhone() {
                var phone = document.getElementById('phone').value;
                if (!(/^1[3456789]\d{9}$/.test(phone))) {
                    alert("手机号码有误，请重填");
                    return false;
                }
            },
            submitChild() {
                this.childForm.Company = SiteConfig.account.CompanyCode;
                this.childForm.Role = 3;
                this.childForm.roleId = 3
                this.$refs.childForm.validate((valid) => {
                    if (valid) {
                        if (this.childForm.Password !== this.childForm.checkPass) {
                            this.$message({
                                type: 'error',
                                message: '密码不一致'
                            })
                        } else if (!(/^1[3456789]\d{9}$/.test(this.childForm.Telephone))) {
                            this.$message({
                                type: 'error',
                                message: '手机号码有误，请重填'
                            })
                        } else {
                            HttpUtil.get('User/Add', this.childForm).success((res) => {
                                if (res.state == 0) {
                                    HttpUtil.get('Project/AddUser', {
                                        projectId: SiteConfig.account.projectId,
                                        UserId: res.data,
                                        role: 4
                                    }).success((r) => {
                                        this.$message({
                                            type: 'success',
                                            message: '添加成功'
                                        });
                                        this.addFormVisible = false;
                                        this.childForm = {};
                                        this.getUserList();
                                    });
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: res.errMsg
                                    });
                                }

                            })
                        }
                    } else {
                        this.$message({
                            type: 'error',
                            message: '输入内容不能为空'
                        })
                    }
                });
            },
            cancleChild() {
                this.childForm = {};
                this.addFormVisible = false;
            },
            getUserDetail(params) {
                HttpUtil.get('User/Detail', params).success((res) => {
                    this.userForm = res.data[0];
                    this.userForm.parentId += '';
                })
            },
            getUserList() {

                HttpUtil.getV2('User/getUserTree', {
                    UserId: SiteConfig.account.id,
                    level: 0,
                    zoneType: 3,
                    energyType: 'Total'
                }).success((res) => {
                    $('.page').css('display', 'block');
                    this.devTree = this.parseTree(res.data, 'U_0');

                });
            }
        },
        computed: {
            NewItems() {
                var _this = this;
                var NewItems = [];
                this.WorkData.map(function (item) {
                    if (item.workName.search(_this.workTypeText.toString()) != -1) {
                        NewItems.push(item);
                    }
                });
                if (NewItems.length <= 0) {
                    NewItems = this.WorkData;
                }
                return NewItems;
            }
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        created: function () {
            let proNo = HttpUtil.getQueryString('projectNo');
            if (proNo) SiteConfig.account.projectNo = proNo;
            let id = HttpUtil.getQueryString('id');
            if (proNo) {
                SiteConfig.account.id = id;
                this.show = false;
            }
            this.height = window.innerHeight - 45;
            this.getUserList();
            HttpUtil.get('Department/List', {projectNo: SiteConfig.account.projectNo}).success((r) => {
                if (r.state == 0) {
                    vuePage.DepartmentData = r.data;
                }
            })
            HttpUtil.get('WorkType/List', {pagesize: 1000, projectNo: SiteConfig.account.projectNo}).success((r) => {
                if (r.state == 0) {
                    vuePage.WorkData = r.data;
                }
            })

            HttpUtil.get('Company/List').success((res) => {
                this.companyList = res.data;
            });
            HttpUtil.get('role/list').success((res) => {

                for (var ind in res.data) {
                    res.data[ind].Id += '';
                }
                this.roleData = res.data
            });

        },
        mounted: function () {

        }
    });


</script>

</body>
</html>
